<template>
    <div class="invest" v-if="!centerDialogVisible">
        <div class="heade">
            <div class="image">
                <h3>{{ Bulletin.name }}</h3>
            </div>
            <div class="searchs">
                <input type="text" class="inputs" v-model="title">
                <img src="@/assets/imgs/search.png" alt="" class="imgs" @click="select">
            </div>
        </div>
        <div class="tilte">
            <ul>
                <li v-for="(item, index) in Bulletin.BulletinList" :key="item.id" @click="details(item.id)">
                    {{index + 1}}.{{item.title}}
                </li>
            </ul>
            <div class="more" @click="handleMore">
                &lt;&lt;&lt;返回
            </div>
        </div>
    </div>
    <div class="details" v-if="centerDialogVisible">
        <p v-html="detailsData.content"></p>
        <div class="more" @click="handleMore1">
            &lt;&lt;&lt;返回
        </div>
    </div>
</template>

<script setup>
import { GetData } from "@/api"
import { reactive, ref, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useStore } from 'vuex'

const router = useRouter()
const route = useRoute()
const store = useStore()
const centerDialogVisible = ref(false)
let Bulletin = ref(store.state.Bulletin)
const title = ref('')
const detailsData = ref()

const details = async (id) => {
    const res = await GetData(`/getBulletinList?id=${id}&title=${title.value}&typeId=${Bulletin.value.id}`)
    detailsData.value = res[0]
    centerDialogVisible.value = true
    console.log(detailsData.value.content);
}

const close = () => {
    centerDialogVisible.value = false
}
const handleMore1 = ()=>{
    centerDialogVisible.value = false
}
const handleMore = () => {
    router.push("/investmentpolicy")

}
const select = async () => {
    const res = await GetData(`/getBulletinList?title=${title.value}&typeId=${Bulletin.value.id}`)
    Bulletin.value.BulletinList = res
    console.log(Bulletin.value);
}

onMounted(() => {

})

</script>

<style scoped lang="less">
* {
    list-style: none;
}

.details {
    width: 100%;
    height: 100%;

    .qx {
        text-align: right;
    }

    p {
        text-align: center;
    }
}

.invest {
    width: 100%;
    height: 100%;

    .heade {
        width: 100%;
        height: 5%;
        line-height: 200%;
        display: flex;
        justify-content: space-between;

        .image {
            width: 30%;
            height: 100%;
            background: url('@/assets/imgs/jiao.png') no-repeat;
            background-size: 100% 100%;

            h3 {
                color: white;
                margin-left: 3%;
            }
        }

        .searchs {
            width: 30%;
            padding-bottom: 0.5%;
            position: relative;

            .inputs {
                width: 74%;
                height: 3.5vh;
                border: 1px solid rgb(40, 110, 148);
                line-height: 0%;
                position: absolute;
                top: -0px;
                margin-left: 2%;
            }

            .imgs {
                width: 20%;
                height: 4vh;
                cursor: pointer;
                margin-left: 77%;
            }
        }
    }

    .tilte {
        width: 100%;
        height: 92%;
        border: 1px solid rgb(40, 110, 148);
        position: relative;

        ul {
            margin-top: 1%;

            li {
                margin: 0 3%;
                font-size: 110%;
                line-height: 300%;
                border-bottom: 2px rgb(40, 110, 148) dashed;
                color: rgb(40, 110, 148);
                cursor: pointer;
            }

            li:last-child {
                border: none;
            }
        }


    }
}

.more {
    width: 6vw;
    height: 4vh;
    background: rgb(220, 239, 246);
    text-align: center;
    line-height: 4vh;
    font-weight: 600;
    color: rgb(24, 77, 157);
    cursor: pointer;
    position: absolute;
    top: 90%;
    left: 90%;
}
</style>
